<template>
   <div>
       <div class="search">
           <el-input
                   :placeholder="placeHolder"
                   style="width:300px;margin-bottom:30px;float:left;"
                   clearable
                   v-model="searchkey">
           </el-input>

           <div class="block" style="margin:0 10px;float:left;" v-if="isShowDate">
               <el-date-picker
                       v-model="activeDate"
                       type="datetimerange"
                       range-separator="至"
                       start-placeholder="开始日期"
                       end-placeholder="结束日期">
               </el-date-picker>
           </div>

           <el-button
               type="primary"
               icon="el-icon-search"
               @click="$emit('handleSearch', {search: searchkey,start_time: activeDate && activeDate.length>1 ? activeDate[0] : '' ,end_time: activeDate && activeDate.length>1 ? activeDate[1] : ''})"
               :style="{marginLeft:left + 'px'}"
           >
               搜索
           </el-button>
           <el-button
               type="primary"
               style="float:right;margin-right:5%;"
               @click="$emit('handleAdd',1)"
               v-if="isShowAdd"
           >
               {{btnText}}
           </el-button>
       </div>
   </div>
</template>

<script>
export default {
    name: "searchBar",
    data () {
        return {
            searchkey: '',
            activeDate: ['2000-1-1','2000-1-1']
        }
    },
    props: {
        isShowDate: {
            type: Boolean,
            default: true
        },
        isShowAdd: {
            type: Boolean,
            default: false
        },
        left: {
            type: Number,
            default: 0
        },
        btnText: {
            type: String
        },
        placeHolder: {
            type: String,
            default: ''
        }
    }
}
</script>

<style scoped>
    .search {padding: 0 10px 0;}
</style>
